<template>
	<div class="fensichonghe">
		<div class="fensichong" v-if="$store.state.denglu">
			<div class="shipinjiancetou">
				<span>粉丝重合分析</span>
			</div>
			
			<div class="fenchong">
				<div class="zhuangtai">
					<div class="zhuangtai1">
						<el-select v-model="value" clearable placeholder="全部状态">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="zhuangtai2">
						<el-date-picker
						  v-model="value2"
						  type="daterange"
						  align="right"
						  unlink-panels
						  range-separator="至"
						  start-placeholder="开始日期"
						  end-placeholder="结束日期"
						  :picker-options="pickerOptions">
						</el-date-picker>
					</div>
				</div>
				
				<div class="chuangjian">
					<div class="chuangjian1">
						+
					</div>
					<div class="chuangjian2" v-for="(item,index) in 8" :key='index'>
						<div class="chuangjian2_1">
							<div class="wancheng">
								<span><i class="el-icon-check"></i></span>
								<span>
									已完成
								</span>
							</div>
						</div>
						<div class="chuangjian2_2">
							<p>
								<span>创建时间：</span>
								<span>2020-04-15 14:02:13</span>
							</p>
							<div class="weidu">
								<div class="weidu1">分析维度：</div>
								<div class="weidu2">
									<p>整体重合分析、性别重合分析</p>
									<p>年龄重合分析、地域重合分析</p>
								</div>
							</div>
							<div class="hongren">
								<div class="hongren1">已选红人:</div>
								<div class="hongren2">
									<p>
										<img src="../../../assets/img/douyin.png" />
										<span>大土豆</span>
									</p>
									<p>
										<img src="../../../assets/img/xiaohongshu.png" />
										<span>小豆子</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
	</div>
</template>

<script>
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"fensichonghe",
		components:{
			jinzhi
		},
		data(){
			return{
				//日期范围选择
				pickerOptions: {
				  shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近一个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近三个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					  picker.$emit('pick', [start, end]);
					}
				  }]
				},
				value1: '',
				value2: '',
				//下拉选择
				options: [{
				  value: '选项1',
				  label: '已完成'
				}, {
				  value: '选项2',
				  label: '未完成'
				}],
				value: '',
				wenben:'用数据深度分析达人之间的粉丝重合情况，帮助用户制定最佳达人投放组合。'
			}
		},
		mounted() {
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.fensichonghe{
		
		.shipinjiancetou{
			padding: 0 0.6rem;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			
			span{
				font-size: 0.7rem;
				display: inline-block;
				margin-left:0.3rem ;
				color: #333333;
				letter-spacing: 0.05rem;
			}
			
			span::before{
				content: "";
				display: block;
				position: absolute;
				top: 0.4rem;
				left: 0;
				width: 0.3rem;
				height: 1rem;
				background-color: #0091FF;
			}
		}
		
		.fenchong{
			padding: 0.8rem;
			background-color: #fff;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.zhuangtai{
				
				.zhuangtai1{
					float: left;
					width: 4rem;
				}
				.zhuangtai2{
					float: left;
					margin-left:1rem ;
				}
			}
			.zhuangtai::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.chuangjian{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				
				.chuangjian1{
					cursor: pointer;
					width: 32%;
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					padding: 2rem 0;
					text-align: center;
					line-height: 2rem;
					font-size: 2rem;
					color: #0091FF;
					margin-bottom:0.8rem ;
				}
				.chuangjian2{
					width: 32%;
					margin-bottom:0.8rem ;
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0.8rem 0;
					
					.chuangjian2_1{
						flex: 1;
						.wancheng{
							margin-left:0.6rem ;
							border: 1px solid #0091FF;
							border-radius:50% ;
							width: 2.5rem;
							height: 2.5rem;
							text-align: center;
							padding: 0.1rem;
							
							span:nth-of-type(1){
								display: block;
								color: #0091FF;
								font-size: 1.1rem;
							}
							span:nth-of-type(2){
								display: block;
								color: #0091FF;
								font-size: 0.5rem;
							}
						}
					}
					.chuangjian2_2{
						flex: 2;
						font-size: 0.4rem;
						
						p:nth-of-type(1){
							span:nth-of-type(1){
								color: #999999;
								font-size: 0.4rem;
							}
							span:nth-of-type(2){
								color: #666;
								font-size: 0.4rem;
							}
						}
						.weidu{
							display: flex;
							margin: 0.6rem 0;
							.weidu1{
								height: 0.6rem;
								color: #999999;
								font-size: 0.4rem;
							}
							.weidu2{
								
								p{
									color: #666;
									font-size: 0.4rem;
									width: 5.5rem;
									margin-bottom:0.1rem ;
									
									overflow : hidden;
									text-overflow: ellipsis;
									display: -webkit-box; 
									-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
									-webkit-box-orient: vertical;
								}
								
							}
						}
						
						.hongren{
							display: flex;
							
							.hongren1{
								height: 0.6rem;
								color: #999999;
								font-size: 0.4rem;
							}
							.hongren2{
								
								p{
									margin-left:0.4rem ;
									display: flex;
									margin-bottom:0.1rem ;
									
									img{
										width: 0.5rem;
										height: 0.5rem;
										border-radius:50% ;
									}
									span{
										display: block;
										margin-left:0.2rem ;
										color: #666;
										font-size: 0.4rem;
										width: 2.5rem;
										margin-bottom:0.1rem ;
										
										overflow : hidden;
										text-overflow: ellipsis;
										display: -webkit-box; 
										-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
										-webkit-box-orient: vertical;
									}
								}
							}
						}
					}
				}
				@keyframes jello-vertical {
				  0% {
				    transform: scale3d(1, 1, 1);
				  }
				  30% {
				    transform: scale3d(0.75, 1.25, 1);
				  }
				  40% {
				    transform: scale3d(1.25, 0.75, 1);
				  }
				  50% {
				    transform: scale3d(0.85, 1.15, 1);
				  }
				  65% {
				    transform: scale3d(1.05, 0.95, 1);
				  }
				  75% {
				    transform: scale3d(0.95, 1.05, 1);
				  }
				  85% {
				    transform: scale3d(1.05, 0.95, 1);
				  }
				  100% {
				    transform: scale3d(1, 1, 1);
				  }
				}
				.chuangjian2:hover{
					animation: jello-vertical 0.9s both;
				}

				
			}
		}
	}
</style>

<style>
	.el-select-dropdown__item.selected{
		padding-left:0.5rem ;
	}
	.el-select-dropdown__item.hover, .el-select-dropdown__item{
		padding-left:0.5rem ;
	}
</style>
